<script setup>
import { ref } from 'vue'
import ItemBox1 from './component/ItemBox1.vue'
import ItemBox2 from './component/ItemBox2.vue'
import ItemCategory from './component/ItemCategory.vue'
import ItemBox4 from './component/ItemBox4.vue'

import { getNewAPI, getHotAPI, getHomeGoodsAPI } from '@/api/home.js'

//新鲜好物部分
const newList = ref([])
const getNew = async () => {
  const res = await getNewAPI(100)
  newList.value = res.data.result
}
getNew()
//人气推荐部分
const hotList = ref([])
const getHot = async () => {
  const res = await getHotAPI()
  hotList.value = res.data.result
  console.log(res)
}
getHot()
//热门排行榜部分
const brandList = ref([])
const brandIndex = ref(0)
const getBrand = async () => {
  const res = await getNewAPI(100)
  brandList.value = res.data.result
}
getBrand()
//点击按钮切换排行榜分类
const value = ref('宠物零食')
const options = ['宠物零食', '宠物用品', '医疗用品', '洗护用品', '托运公司']
const handlesegmented = () => {
  console.log(value.value)
  brandList.value.splice(0, 10)
}
// 点击按钮切换热门排行榜的分类里面数据
const carousel = ref(null)
const handlePrevBrand = () => {
  if (brandIndex.value > 0) {
    carousel.value.prev()
    brandIndex.value--
  }
}
const handleNextBrand = () => {
  brandIndex.value++
  carousel.value.next()
}
//分类部分
const HomeGoodsList = ref([])
const getHomeGoods = async () => {
  const res = await getHomeGoodsAPI(100)
  HomeGoodsList.value = res.data.result
}
getHomeGoods()
//最新专题
const newTitle = ref([
  '/assets/file  (9).jpeg',
  '/assets/file  (10).jpeg',
  '/assets/file  (11).jpeg'
])
const imgList = ref([
  { id: 1, url: '/assets/banner1.jpeg' },
  { id: 2, url: '/assets/banner2.jpeg' },
  { id: 3, url: '/assets/banner3.jpeg' },
  { id: 4, url: '/assets/banner4.jpeg' },
  { id: 5, url: '/assets/banner5.jpeg' },
  { id: 6, url: '/assets/banner6.jpeg' }
])
</script>
<template>
  <div class="home">
    <!-- 轮播图 -->
    <div
      style="
        background-color: #fdfbee;
        height: 270px;
        display: flex;
        align-items: center;
      "
    >
      <el-carousel
        :interval="4000"
        type="card"
        height="240px"
        class="el_carousel"
        style="margin: 0 auto"
      >
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <el-image :src="item.url" :fit="contain" class="carousel_img" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 新品上市和人气推荐部分 -->
    <div style="width: 900px; margin: 0 auto">
      <!-- 新品上市 -->
      <h3 style="font-family: '像素字体'">
        新品上市<span
          style="
            font-size: 10px;
            font-weight: normal;
            margin-left: 10px;
            font-family: '小可奶酪体';
          "
          >最新商品，欢迎选购</span
        ><a href="#" class="a_total">查看全部>></a>
      </h3>
      <div class="first">
        <ItemBox1 v-model:item="newList[i - 1]" v-for="i in 4" :key="i" />
      </div>
      <!-- 人气推荐 -->
      <h3 style="font-family: '像素字体'">
        人气推荐<span
          style="
            font-size: 10px;
            font-weight: normal;
            margin-left: 10px;
            font-family: '小可奶酪体';
          "
          >人气商品，不容错过</span
        ><a href="#" class="a_total">查看全部>></a>
      </h3>
      <div class="first">
        <ItemBox2 v-model:item="hotList[i - 1]" v-for="i in 4" :key="i" />
      </div>
    </div>
    <!-- 热门排行榜 -->
    <div class="hotname" style="background-color: #f5ece3; height: 380px">
      <div style="width: 900px; margin: 0 auto">
        <h3 style="font-family: '像素字体'; padding-top: 15px">热门排行榜</h3>
        <div class="custom-style">
          <!-- 分类部分 -->
          <el-segmented
            v-model="value"
            :options="options"
            style="margin-right: 440px"
            @change="handlesegmented"
          />
          <el-link :underline="false" @click="handlePrevBrand"
            ><el-icon size="20px"><DArrowLeft /></el-icon></el-link
          ><el-link :underline="false" @click="handleNextBrand"
            ><el-icon size="20px"><DArrowRight /></el-icon
          ></el-link>
        </div>
        <!-- 热门排行榜的每个商品 -->
        <el-carousel
          height="250px"
          motion-blur
          :autoplay="false"
          ref="carousel"
          arrow="never"
          indicator-position="none"
        >
          <el-carousel-item v-for="item in 3" :key="item">
            <div class="hotItems">
              <ItemBox4
                v-model:item="brandList[brandIndex * 6 + i - 1]"
                v-for="i in 6"
                :key="i"
              />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 分类 -->
    <ItemCategory
      v-model:HomeGoods="HomeGoodsList[i - 1]"
      v-for="i in HomeGoodsList.length"
      :key="i"
    />
    <!-- 最新专题 -->
    <div style="width: 900px; margin: 0 auto">
      <h3 style="font-family: '小可奶酪体'; margin-top: 20px; color: #eebe77">
        最新专题<a
          href="#"
          style="
            font-size: 10px;
            font-weight: normal;
            margin-left: 750px;
            font-family: '小可奶酪体';
            text-decoration: none;
            color: black;
          "
          >查看全部>></a
        >
      </h3>
      <div class="first">
        <div
          v-for="i in 3"
          :key="i"
          style="
            width: 300px;
            height: 180px;
            background-color: pink;
            margin: 0 10px;
          "
          @click="$router.push('/111')"
        >
          <el-image
            :src="newTitle[i - 1]"
            fit="fill"
            style="height: 100%"
          ></el-image>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.hotItems {
  display: flex;
  flex-wrap: wrap;
}
.first {
  display: flex;
}
.custom-style {
  margin-bottom: 10px;
  .el-segmented {
    --el-border-radius-base: 16px;
  }
}
.el_carousel {
  width: 900px;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.carousel_img {
  height: 240px;
}
.a_total {
  font-size: 10px;
  font-weight: normal;
  margin-left: 800px;
  font-family: '小可奶酪体';
  text-decoration: none;
  color: black;
}
</style>
